<template>
<div class="box2">
    <el-form :model="ruleForm" :rules="rules" :inline="false" ref="ruleForm" label-width="200px" class="demo-ruleForm" size="medium">
        <div class="must">
            <div class="cad">
                <!-- <el-form-item label="联系人：" prop="Linkman">
            <el-input v-model="ruleForm.Linkman" placeholder="请填写名称或姓名"></el-input>
            <div class="informm">
              <img src="../../assets/imgs/inform.png" alt="通知" />
              <div class="content">
                <span>示例：李四</span>
              </div>
            </div>
          </el-form-item> -->
                <!-- <el-form-item label="代理机构名称：" prop="organization">
          <el-input v-model="ruleForm.organization" placeholder="请填写"></el-input>
          </el-form-item>-->
                <el-form-item label=" 商标注册号：" prop="loginNum">
                    <el-input v-model="ruleForm.loginNum" placeholder="请填写"></el-input>
                    <div class="informm">
                        <img src="../../assets/imgs/inform.png" alt="通知" />
                        <div class="content">
                            <span style="width: 260px">示例：2544454444(可填写多个,使用逗号隔开)</span>
                        </div>
                    </div>
                </el-form-item>
                <div>

                    <el-form-item label="商标类别：" prop="type">
                        <el-input class="type-number" v-model.number="ruleForm.type" placeholder="请填写类别（1-45之间）"></el-input>
                        <div class="informm" style="margin-left:-45%">
                            <img src="../../assets/imgs/inform.png" alt="通知" />
                            <div class="content">
                                <!-- <span>提示：类别只能是1--45，否则为错误</span> -->
                                <span>请前往<a target="_blank" style="color:#2c9dfc;cursor:pointer; text-decoration:none" href="http://sbj.cnipa.gov.cn/sbcx/">官网</a>点击“我接受”->商标/服务项目</span>
                            </div>
                        </div>
                    </el-form-item>
                </div>
            </div>

            <div style="margin-left:0.1%">
                <el-form-item class="upload" label="网上确认书：" prop="qrfile" :rules=" {  required: true,validator:hasQrfile,trigger: 'change' }" :show-message="!$store.state.stateJdg" :inline-message="true">
                    <upfile :callback="setSure">
                        <img :src="ruleForm.qrfile?'':imgfile" v-if="$store.state.stateJdg" />
                    </upfile>
                    <div class="exam-img">
                        <div class="img-inform">
                            <img src="../../assets/imgs/inform.png">
                            <span>示例:</span>
                        </div>
                        <examimg :imgType="4"></examimg>
                    </div>
                    <div>
                        <span class="informs">
                            请点此
                            <a :href="mconfig.host + '/file/download?fileType=2'">下载网上确认书</a>,查到相应商标编号并填充
                        </span>
                        <br />
                        <span class="notice">请将下载的网上确认书填写完成, 然后上传JPG文件或是PNG文件</span>
                    </div>
                </el-form-item>
            </div>
            <el-form-item label="其他附件：" style="margin-left: -220px">
              <uploads
                  :callback="backUrl"
                  :delUrl="delUrl"
                  :file_config="{field:'dengjichenluofile'}"
                  :list="ruleForm.dengjichenluofile"></uploads>
              <div class="exam-img" style="margin-left: 100px">
                <div class="img-inform">
                  <img src="../../assets/imgs/inform.png">
                  <span style="width: 100px">提示：其他附件</span>
                </div>
              </div>
            </el-form-item>
            <div class="line"></div>
            <el-form-item label="是否共有商标：">
                <el-radio-group fill v-model="ruleForm.radio">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <div v-if="ruleForm.radio==1?true:false" class="common">
                <el-form-item label="其他共有人"></el-form-item>
                <el-form-item label="其他共有申请人">
                    <both :callback="getBoth" :append="alterAppend" :class_id="$route.query.id"></both>
                </el-form-item>
            </div>

            <div class="btns">
                <el-button type="primary" @click="outStep">上一步</el-button>
                <el-button type="primary" @click="verify('ruleForm')">提交并审核</el-button>
            </div>
            <el-dialog class="dialog" :show-close="false" :center="true" :visible.sync="dialogVisible" width="460px" :before-close="handleClose">
                <div class="hint">
                    <img src="../../assets/imgs/branch.png" alt="提示图片" />
                    <span>选择您想去办理的网点</span>
                </div>
                <el-form-item label="选择网点：" prop="value" >
                    <el-select v-model="ruleForm.value" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.deptId" :label="item.deptName" :value="item.deptId">
                            <span style="float: left">{{ item.deptName }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.address }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <div slot="footer" class="dialog-footer">
                    <el-button type="info" @click="dialogVisible = false">取 消</el-button><!-- type="info"-->
                    <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
                </div>
            </el-dialog>
            <el-dialog class="hintMsg" :show-close="false" title="温馨提示" :visible.sync="centerDialogVisible" width="462px" @cose="skip">
                <span>您的信息已提交，工作人员将在3-5日内对你的信息审核，审核通过后即可预约业务，审核结果将通过短信的方式发送给你。</span>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="skip">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </el-form>
</div>
</template>

<script>
import upfile from "../common/upfile";
import config from "../../utils/config";
import both from "../common/both.vue";
import examimg from "../common/imgExample";
import uploads from "@/components/common/uploads";
export default {
    data() {
        return {
            //网点列表
            options: [],
            //提交成功弹出框变量
            centerDialogVisible: false,
            //网点弹出框控制变量
            dialogVisible: false,
            //提交表单
            formData: new FormData(),
            //表单唯一id
            classId: "",
            // 网上确认书跳转地址
            urls: "javascript:;",
            //共有人
            common: [],
            //共有人模板

            commonModel: {
                name: "名称(中文)：",
                englishName: "(英文)：",
                site: "地址(中文)：",
                englishSite: "(英文)：",
                value: "",
                englishValue: "",
                siteValue: "",
                englishSiteValue: "",
            },
            //实际模板
            modelcommon: {
                partNameCh: "",
                partNameEn: "",
                partAddrCh: "",
                partAddrEn: "",
            },
            //填写的信息
            ruleForm: {
                //网上确认书类型
                // Linkman: "",
                organization: "",
                loginNum: '',
                radio: 0,
                value: "",
                type: "",
                qrfile: "",
                commonArr: [],
                dengjichenluofile:[],
            },
            imgfile: "",

            // hint: "",
            visi: false,
            rules: {
                // Linkman: [
                //   { required: true, message: "联系人不能为空", trigger: "blur" },
                //   {
                //     pattern: /^[\u0391-\uFFE5A-Za-z]+$/,
                //     message: "请输入正确的名称",
                //     trigger: "blur",
                //   },
                // ],
                dengjichenluofile: [
                  { required: true, message: "附件不能为空", trigger: "change" },
                ],
                loginNum: [{
                        required: true,
                        message: "商标注册号不能为空",
                        trigger: "blur"
                    },
                    {
                        // pattern: /^[0-9]{1,11}$/,
                        // message: "必须为为数字",
                        trigger: "blur"
                    },
                ],
                radio: [{
                    required: true,
                    message: "是否选项不能为空",
                    trigger: "change"
                }, ],
                type: [{
                        required: true,
                        message: "商品类别不能为空",
                        trigger: "blur"
                    },
                    {
                        pattern: /^[0-9]{1,2}$/,
                        message: "请输入数字"
                    },

                    //  { min: 1, max: 45, message: '商品类别长度在 1 到 45 之间', trigger: 'blur' },
                ],

            },
            mark: false, //网上确认书

            append: [],
            alterAppend: []
        };
    },
    mounted() {
        //获取从存储在路由中的classId
        this.classId = this.$route.query.id;
        //获取网点列表
        this.$http.get("trademark/system/dept/findDept").then((res) => {
            // ////console.log(res.data.data);
            this.options = res.data.data;

        });
        if (this.$store.state.stateJdg) {
            this.$store.state.alterData.append && (this.alterAppend = this.$store.state.alterData.append);
            this.$store.state.alterData.public.contacts = this.$store.state.alterData.data.contacts
            this.$store.state.alterData.public.ageName = this.$store.state.alterData.data.ageName
            this.$store.state.alterData.public.appNum = this.$store.state.alterData.data.appNum
            this.$store.state.alterData.public.isComm = this.$store.state.alterData.data.isComm
            this.$store.state.alterData.public.model = this.$store.state.alterData.data.model
            // this.$store.state.alterData.data.Object.assign(this.$store.state.alterData.public);
            this.mark = true;
            let {
                contacts,
                ageName,
                appNum,
                isComm,
                model,
                otherfile,
            } = this.$store.state.alterData.public;

            this.ruleForm.Linkman = contacts;
            this.ruleForm.organization = ageName;
            this.ruleForm.loginNum = appNum;
            this.ruleForm.radio = Number(isComm);
            // 其他附件
            this.ruleForm.dengjichenluofile = JSON.parse(otherfile);
            this.ruleForm.type = model;
            this.ruleForm.value = Number(this.$store.state.alterData.public.branchNetworkId);//网点
            ////console.log(this.ruleForm.radio);
            //回显图片
            this.imgfile =
                this.mconfig.host + this.$store.state.alterData.public.qrfile;
            // console.log(this.imgfile);
            // //console.log(this.imgfile);
            // //回显共有人append
            // console.log(this.$store.state.alterData);
            if (this.$store.state.alterData.append) {
                this.$store.state.alterData.append.forEach((item) => {
                    let objCommom = JSON.parse(JSON.stringify(this.modelcommon));
                    this.ruleForm.commonArr.push(objCommom);
                    let objValue = JSON.parse(JSON.stringify(this.commonModel));
                    objValue.value = item.partNameCh;
                    objValue.englishValue = item.partNameEn;
                    objValue.siteValue = item.partAddrCh;
                    objValue.englishSiteValue = item.partAddrEn;
                    this.common.push(objValue);
                });
            }
        }
    },
    watch: {
        //通过数据监听的方式将共有人模板中的信息同步到ruleForm.commonArr中
        common: {
            handler(newName, oldName) {
                this.common.forEach((item, index) => {
                    console.log(newName, oldName)
                    this.ruleForm.commonArr[index].partNameCh = item.value;
                    this.ruleForm.commonArr[index].partNameEn = item.englishValue;
                    this.ruleForm.commonArr[index].partAddrCh = item.siteValue;
                    this.ruleForm.commonArr[index].partAddrEn = item.englishSiteValue;
                });
            },
            deep: true,
        },
        // "ruleForm.radio": function (val) {
        //   if (val == 1) {
        //     if (this.$store.state.stateJdg == false) {
        //       this.plus();
        //       return ;
        //     }
        //     this.plus();
        //   } else {
        //     this.dele();
        //   }
        // this.dele();

        // },
        "ruleForm.type": function (val) {
            if (this.ruleForm.type < 1 || this.ruleForm.type > 45) {
                this.ruleForm.type = "1";
                this.open1("请输入1-45之间的数值","error");
            }
        },
    },

    methods: {
        backUrl(url,file_config){
          this.ruleForm[file_config["field"]].push(url)
        },
        delUrl(index,file_config){
          this.ruleForm[file_config["field"]].splice(index,1)
          this.$set(this.ruleForm,file_config["field"],this.ruleForm[file_config["field"]])
        },
        hasQrfile(rule, value, callback) { //验证规则
            if (this.ruleForm.qrfile || this.imgfile) {
                callback();
            } else {
                callback(new Error("请上传确认书！"));
            }
        },
        getBoth(value) { //共有人数据
            this.append = value;
        },

        //返回上一步
        outStep() {
            this.$emit("wp", 1, "请填写申请业务信息");
        },
        //提示模板
        open1(msg, types = "success") {
            this.$message({
                message: msg,
                type: types,
            });
        },
        //弹出框的选项确认框
        handleClose(done) {
            this.$confirm("确认关闭？")
                .then((_) => {
                    done();
                })
                .catch((_) => {});
        },
        //对于共有人的字段进行验证
        verify(formName) {

            this.$refs[formName].validate((valid) => {
                if (!valid) {
                    this.open1("请确定表单数据正确填写", "error");
                    this.dialogVisible = false;
                    return false;
                }

                if (this.append.length == 0 && this.ruleForm.radio == 1) {
                    this.dialogVisible = false;
                    this.open1("请补充其他共有人信息！", "error");
                    return false;
                }
                if (this.ruleForm.qrfile == "" && this.$store.state.stateJdg == true) {
                    this.ruleForm.qrfile = {}; //   原商品确认书不变赋值
                } else if (this.ruleForm.qrfile == "" && this.$store.state.stateJdg == false) {
                    this.open1("请上传确认书！", "error");
                    this.dialogVisible = false;
                    return false;
                } else {
                    this.ruleForm.qrfile = this.ruleForm.qrfile;
                }

                this.dialogVisible = true;
            });
        },

        //表单提交事件
        submitForm(formName) {
            let _this = this;
            if (this.ruleForm.value == "") {
                return this.open1("请选择网点", "error");
            }
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //每次提交重新生成新的FormData用于储存新的数据
                    this.formData = new FormData();
                    this.dialogVisible = false;
                    //获取vuex中保存的步骤二中的数据
                    let {
                        name,
                        englishName,
                        number, //营业执照编号
                        numbers, //身份证号
                        person_type,
                        site,
                        phone,
                        legal, //法人
                        postal,
                        nationality,
                        englishSite,
                    } = this.$store.state.storeDatas;
                    ////console.log(this.ruleForm, this.classId);
                    ////console.log(this.$store.state.storeDatas);
                    //向FormData中添加数据
                    this.formData.append("contacts", this.ruleForm.Linkman); //联系人
                    this.formData.append("ageName", this.ruleForm.organization); //代理机构
                    this.formData.append("appNum", this.ruleForm.loginNum); //申请号
                    this.formData.append("isComm", this.ruleForm.radio); //是否共有商标
                    this.formData.append("model", this.ruleForm.type); //类别

                    this.formData.append("qrfiles", this.ruleForm.qrfile); // 识别图片

                    this.formData.append("branchNetworkId", this.ruleForm.value); //网点id
                    this.formData.append("classId", this.classId); //业务id
                    this.formData.append("optype", 1); //

                    // 其他附件
                    this.formData.append('otherfile', JSON.stringify(this.ruleForm.dengjichenluofile));

                    let arr = this.$store.getters.getRuleForm;
                    for (let key in arr) {
                        this.formData.append(key, arr[key]);
                    }
                    if (this.ruleForm.radio == "1") {
                        this.formData.append(
                            "proAppends", JSON.stringify(this.append)
                        );
                    } else {
                        this.formData.append(
                            "proAppends", ""
                        );
                    }
                    //共有人信息

                    //配置请求头
                    var config = {
                        header: {
                            "Content-Type": "multipart/form-data",
                        },
                    };
                    // axios向后端发送数据
                    let isChange = this.$store.state.stateJdg;
                    ////console.log(this.$store.state.stateJdg);
                    let x = this.$store.state.storeId;
                    isChange ? this.formData.append("id", x) : ""; //修改的时候填写的id
                    let url = isChange ?
                        this.$store.state.alterData.urls :
                        "/proTExtension/firstSubmit";
                    //console.log(url);
                    this.$http
                        .post("trademark" + url, this.formData, config)
                        .then(function (response) {
                            ////console.log(response,"123456478");
                            //若状态码不为200则不跳转
                            if (response.data.code != 200) {
                                _this.open1("提交失败", "error");
                                return;
                            }

                            _this.centerDialogVisible = true;
                        })
                        .catch(function (error) {
                            ////console.log(error);
                        });
                } else {
                    return false;
                }
            });
        },
        //跳转函数
        skip() {
            this.centerDialogVisible = false;
            this.open1("操作成功");
            this.$router.push({
                path: "/business/myBusiness/auditing",
            });
        },
        //确认书
        setSure(files) {
            // console.log(files);
            this.ruleForm.qrfile = files[0];
            this.mark = false;
        },
        //点击删除
        dele() {
            this.common.pop();
            this.ruleForm.commonArr.pop();
            if (this.common.length == 0) {
                this.ruleForm.radio = 0;
            } else {
                //  this.ruleForm.radio = 1;
            }
        },

        //点击添加更变许可人
        plus() {
            let objCommom = JSON.parse(JSON.stringify(this.modelcommon));
            this.ruleForm.commonArr.push(objCommom);
            let objValue = JSON.parse(JSON.stringify(this.commonModel));
            this.common.push(objValue);
            if (this.common.length != 0) {
                this.ruleForm.radio = 1;
            }
        },
        radioAnniu: function () {
            if (this.ruleForm.radio == 1) {
                if (this.common.length == 0) {
                    this.plus();
                }
            }
        },
        // commonClear(){
        //     if(this.ruleForm.radio == 0){
        //         this.common = [];
        //     }
        // }
    },
    components: {
        upfile,
        both,
        examimg,
        uploads
    },
};
</script>

<style lang="less" scoped>
//  修改的表单样式
.box2 .upload[data-v-23b5d1fd] {
    margin: 0 0 20px 0;
    margin-left: -15%;
}

.upload .el-form-item__content div:nth-of-type(1) {
    margin-top: 10px;
}

.cad .el-form-item {
    margin-left: -15%;
}

.cad .el-input {
    width: 80%;
}

.informm {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    left: 100%;
    width: 250px;
    height: 32px;
    color: #F96900;
    font-size: 10px;
    line-height: 14px;
    margin-left: -20%;

    img {
        margin: 11px;
    }

    .content {
        display: flex;
        flex-direction: column;
        position: relative;

        .ts {
            text-indent: 3em;
        }
    }
}

.btns {
    display: flex;
    justify-content: center;

    .el-button {
        margin: 0 20px;
    }
}

.box2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    // margin-top: 100px;
    width: 100%;
    min-height: 800px;
    margin-left: -90px;

    .tle {
        font-size: 24px;
        color: #000;
    }

    .el-form {
        width: 100%;
    }

    .must,
    .select {
        display: flex;
        position: relative;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 30px 0 30px;
        margin-bottom: 80px;
        width: 100%;
        // border: 1px solid #bbbbbb;
        border-radius: 10px;

        .el-form-item {
            width: 680px;
        }

        .inline {
            display: flex;

            .el-form-item {
                margin: 0;
                width: 290px !important;
            }
        }
    }

    .must {
        margin-bottom: 20px;
    }

    .line {
        width: calc(100% - 280px);
        margin: 10px auto;
        height: 1px;
        border-top: 1px dashed #d9d9d9;
    }

    .imgHint {
        margin: 5px;
        font-size: 12px;
        line-height: 17px;
        color: #f5222d;
    }

    .affirm {
        font-size: 12px;
        color: #a0a3a5;

        a {
            text-decoration: none;
            color: #3685ff;
        }
    }

    .input {
        width: 190px;
    }

    .upload {
        margin: 20px 0;
    }

    .type-number {
        width: 250px;
    }

    .informs {
        position: absolute;
        width: 500px;
        font-size: 12px;
        color: #a0a3a5;

        a {
            text-decoration: none;
            color: #3685ff;
        }
    }

    .notice {
        color: #f00;
        font-size: 12px;
    }

    .tle {
        list-style: none;
        margin: 40px 0 20px;
        font-size: 24px;

        &~.tle {
            color: #bbb;
        }
    }

    .hint {
        color: #F96900;
        background-color: #fff;

        .el-form-item__label {
            width: 150px;
        }

        img {
            width: 20px;
        }
    }

    .el-steps {
        width: 70%;
        height: 200px;
    }

    .el-button {
        //display: block;
        display: inline;
        margin: 0 20px;
        // background-color: #67c23a !important;
        // border-color: #67c23a !important;
    }

    .common-butt {
        margin-bottom: 20px;
    }

    .common .el-button {
        background-color: #fff !important;
        border-color: #bbb !important;
    }
}

.dialog-footer {
    display: flex;
    justify-content: space-between;
    color: #fff;

    .lan {
        background-color: #2c9dfc !important;
        border-color: #2c9dfc !important;
    }
}

.dialog /deep/.el-form-item__label {
    width: 109px !important;
}

.dialog /deep/.el-form-item__content {
    margin-left:0px !important;
    display: flex;
    justify-content: left;
}

.dialog /deep/.el-input {
    width: 250px;
}

.el-checkbox-group {
    line-height: 14px;
}

.is-checked/deep/.el-radio__inner,
.is-checked/deep/.el-checkbox__inner {
    border-color: #409EFF;
    background: #409EFF;
}

.el-radio/deep/.el-radio__inner:hover {
    border-color: #999999 !important;
}

.is-checked/deep/.el-radio__label,
.is-checked/deep/.el-checkbox__label {
    color: #333;
}

.is-focus .el-checkbox__inner {
    border-color: #999999 !important;
}

.el-checkbox/deep/.el-checkbox__inner:hover {
    border-color: #999999 !important;
}

.el-step__head.is-process {
    border-color: #f96900;
    color: #f96900 !important;
}

.hintMsg {
    /deep/.el-dialog__header {
        display: flex;
        justify-content: center;
        font-weight: bold;
    }

    .dialog-footer {
        justify-content: center;

        .el-button {
            border-color: #2c9dfc !important;
            background: #2c9dfc !important;
        }
    }
}

.buttonSty {
    width: 300px;
    // margin: 0 auto;
    margin-left: 78px;
    // border: 1px solid red;
}

#star {
    position: absolute;
    color: red;
    margin-left: -120px;
}

//fiexed dialog 0902

/deep/ .el-dialog.el-dialog--center /deep/ {
    .el-dialog__header {
        padding: 0;
    }

    .el-dialog__body {
        padding: 20px;
    }

    .hint {
        color: #F96900;
        background-color: #fff;
        padding: 0;
        padding-bottom: 20px;
    }

    .el-button {
        margin: 0;
    }

    .el-form-item__label {
        width: 86px !important;
    }
}
.exam-img{
  position: absolute;
  top: 0;
  left: 465px;
}
.img-inform{
  img{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -140px;
    transform: translate(-50%,-50%);
  }
  span{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      white-space: nowrap;
      margin-left: -100px;
      width: 50px;
      color: #f96900;
  }
}
</style>
